<template>
  <view class="coupondetail">
    <view class="content">
      <view class="top">
        <view class="top" style="">
          <view class="top-left" style="display: grid">
            <view
              ><text>{{ district }}</text></view
            >
            <view
              ><text>{{ data.coupon_value }}</text
              >元</view
            >
          </view>
          <!-- //  _id: "5f843329775c0b1d087f2384"
shopping_district: {_id: "5f7d14eaeffea0f12e738be8", name: "雨花世茂52+"}
activity_batch_id: {_id: "5f7da1cdeffea0f12e811d87", title: "第一期消费券活动"}
coupon_value: 50
valid_start_dtt: 1602499358
valid_end_dtt: 1604140920
activity_type: "question"
get_dtt: 1602503704
use_dtt: 1602508904
use_business_id: {_id: "5f7d1944effea0f12e73f4f0", name: "KFC"}
coupon_number: "7e4DsJL28M3u4G53"
note: "优惠券简介"
introduction: "优惠券说明优惠券说明优惠券说明"
status: "unused"-->
          <view class="info">
            <view class="info-title">{{ data.note }}</view>
            <view class="info-category">{{ district }}</view>
            <view class="info-time"
              >{{ format(data.valid_start_dtt) }}——{{
                format(data.valid_end_dtt)
              }}</view
            >
          </view>
        </view>
      </view>
      <view class="bottom">
        <view style="width: 341rpx; height: 341rpx; margin: 40rpx auto"
          ><qrcode
            style="width: 341rpx; height: 341rpx"
            :text="data.coupon_number"
        /></view>

        <!-- <drawQrcode></drawQrcode> -->
        <!-- width: 341px;
//         height: 341px;
//         margin: 40 auto; -->
        <!-- <image :src="image"></image> -->
        <view
          ><text :user-select="true">{{ data.coupon_number }}</text></view
        >

        <view class="text">
          <view>使用说明</view>
          <view
            >{{data.introduction}}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import "./index.scss";
import img1 from "../../../assets/image/build1.png";
import card from "../components/card/index";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import requset, { getImage } from "../../../utils/request";
import formatTime from "../../../utils/formatTime";
import QRCode from "../../../components/qrcode";
// import drawQrcode from "weapp-qrcode";
// import { Canvas } from "@tarojs/components";

export default {
  components: {
    // card:card,
    // 'Canvas':Canvas,
    qrcode: QRCode,
  },
  data() {
    return {
      image: img1,
      status: 1,
      data: { shopping_district: {} },
    };
  },
  computed: {
    district: function () {
      // `this` 指向 vm 实例
      // return 'e3'
      return this.data.shopping_district.name
        ? `${this.data.shopping_district.name}专用`
        : "通用";
    },
  },
  created() {
    console.log(getCurrentInstance().router.params.id, "2342");
    const id = getCurrentInstance().router.params.id;
    this.getDetail(id);
  },
  mounted() {

  },

  methods: {
    getDetail(id) {
      requset("get", `/api/rest/consumer_coupons/${id}.htm`).then((res) => {
        console.log(res, "getDetail");
        this.data = res;
      });
    },
    format(time) {
      // return()

      return formatTime(time, "yyyy-mm-dd");
    },
  },
};
</script>
